<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试卷管理</title>
    <script src="../js/jquery.min.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<style>
    .checkexampaper {
        display: none;
        width: 600px;
        height: 600px;
        position: fixed;
        border: #ebebeb solid 1px;
        left: 50%;
        top: 50%;
        background: #ffffff;
        box-shadow: 0px 0px 20px #ddd;
        z-index: 9999;
        transform: translate(-50%, -50%);

    }
    .bgtwo {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background: rgba(0, 0, 0, .3);
        z-index: 9998;
    }

    a {
        text-decoration: none;
        color: #000000;
    }
    .checkexampaper-title {
        width: 100%;
        margin: 10px 0px 0px 0px;
        text-align: center;
        line-height: 40px;
        height: 40px;
        font-size: 18px;
        position: relative;
        cursor: move;
    }
    .checkexampaper-title span {
        position: absolute;
        font-size: 12px;
        right: -20px;
        top: -30px;
        background: #ffffff;
        border: #ebebeb solid 1px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }
</style>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>试卷管理</legend>
</fieldset>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

    <ul class="layui-tab-title">
        <li class="layui-this myexampaper">我的试卷</li>
        <li>共享试卷</li>
    </ul>

    <div class="layui-tab-content" style="height: 100px;">
        <!-- ********************* -->
        <!-- ******************第一部分：我的试卷******************************** -->
        <div class="layui-tab-item  layui-show">

            <div>
                <button type="button" class="layui-btn createexampaperBtn">创建试卷</button>
                <button type="button" class="layui-btn managerexampaperBtn">管理试卷</button>
            </div>

            <div style="margin-top: 20px;">
                <form class="layui-form layui-form-pane" method="POST"
                      action="#">
                    <%--             ../admin/exampaper?m=allexam&p=1&method=2     lay-filter="selectcourse1"   --%>
                    <div class="layui-inline" style="margin-right: 20px;">
                        <div class="layui-input-inline">
                            <select name="course" lay-verify="required" id="selectcourse1" class="selectcourse">
                                <option value="">请选择题库</option>
                                <option value="10002">JavaOOP</option>
                                <option value="10003">MySQL</option>
                                <option value="10004">设计模式</option>
                                <option value="10005">Java并发</option>
                                <%--   <c:forEach items="${courselist1}" var="courselist">
                                    <option value="${courselist.course_id}">${courselist.course_name}</option>
                                </c:forEach>--%>
                            </select>
                        </div>
                    </div>
                    <%--                    <button type="submit" class="layui-btn">搜索</button>  onclick="searchmyexampaper()--%>
                    <button type="button" class="layui-btn searchmyexampaper" data-type="reload">搜索</button>
                </form>
            </div>
            <!-- 表单 -->
            <hr>
            <!-- 表格 -->
            <table class="layui-table" id="allmyexampaper" lay-filter="allmyexampaper"></table>
            <script type="text/html" id="barDemo2">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</a>
                <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
                <a class="layui-btn layui-btn-xs" lay-event="check" class="checkexampaperbtn">查看</a>
            </script>
        </div>


        <!-- ******************第二部分：共享试卷*../admin/exampaper?m=allshareexam&p=1&method=2******************************* -->
        <div class="layui-tab-item">

            <div style="margin-top: 20px;">
                <form class="layui-form layui-form-pane" method="POST"
                      action="#">
                    <input type="text" name="exampaper_name" lay-verify="title" autocomplete="off" placeholder="请输入试卷名"
                           class="layui-input exampaper_name"
                           style="width: 200px;display: inline-block;margin-right: 20px;margin-left: 20px;">
                    <div class="layui-inline" style="margin-right: 20px;">
                        <div class="layui-input-inline" class="selectcou" lay-filter="selectcourse2">
                            <select name="course_id" lay-verify="required" class="course_id"
                                    id="selectcourse2">
                                <option value="">请选择题库</option>
                                <option value="10002">JavaOOP</option>
                                <option value="10003">MySQL</option>
                                <option value="10004">设计模式</option>
                                <option value="10005">Java并发</option>
                                <%-- <c:forEach items="${courselist1}" var="courselist">
                                     <option value="${courselist.course_id}">${courselist.course_name}</option>
                                 </c:forEach>--%>
                            </select>
                        </div>
                    </div>
                    <input type="text" name="createuser_id" lay-verify="title" autocomplete="off" placeholder="创建人"
                           class="layui-input createuser_id"
                           style="width: 100px;display: inline-block;margin-right: 20px;margin-left: 20px;">
                    <%--                    <button type="button" class="layui-btn searchshareexampaperBtn">搜索</button>--%>
                    <button type="button" class="layui-btn searchshareexmapaper">搜索</button>
                </form>
            </div>
            <!-- 表单 -->
            <hr>
            <!-- 表格 -->
            <table class="layui-table" id="allshareexampaper" lay-filter="allshareexampaper"></table>
            <script type="text/html" id="barDemo1">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</a>
                <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
                <a class="layui-btn layui-btn-xs" lay-event="check">查看</a>
            </script>
        </div>
        <!-- ********************* -->
    </div>

</div>
<!-- ******************第三部分：查看试题弹出层*../admin/exampaper?m=allshareexam&p=1&method=2******************************* -->
<div id="checkexampaper" class="checkexampaper">
    <div id="titletwo" class="checkexampaper-title">试卷查看
        <span><a  href="javascript:void(0);" class="closebtn">关闭</a></span>
    </div>
    <hr>
    <div class="exampaper-input-content" style="width: 90%;overflow: scroll">

        <form class="layui-form" action="" method="GET">
            <div class="layui-form-item">
                <label class="layui-form-label">试卷id</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="1"
                           class="layui-input exampaperid" disabled="disabled" width="70%">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">试题名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="单选题"
                           class="layui-input exampapername" disabled="disabled">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">创建人</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="Java"
                           class="layui-input exampapercreater" disabled="disabled">
                    <%--                        查询题库名--%>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">所属题库</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="Java"
                           class="layui-input exampapercourse" disabled="disabled">
                    <%--                        查询题库名--%>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">试卷总分</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="Java"
                           class="layui-input exampaperscore" disabled="disabled">
                    <%--                        查询题库名--%>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">创建时间</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="A"
                           class="layui-input exampapercreattime" disabled="disabled">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">试题描述</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="A"
                           class="layui-input exampaperdesc" disabled="disabled">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">试题类型</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="A"
                           class="layui-input exampapertype" disabled="disabled">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">试题内容</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="A"
                           class="layui-input exampapercontent" disabled="disabled">
                </div>
            </div>
        </form>

    </div>
</div>
<!-- 第二个遮盖层 -->
<div id="bgtwo" class="bgtwo"></div>
</body>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['element', 'form', 'layedit', 'laydate', 'laypage', 'layer', 'table'], function () {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;
        var laypage = layui.laypage,
            layer = layui.layer;
        var table = layui.table;


        //显示所有 我的试卷
        table.render({
            elem: '#allmyexampaper',
            url: '/OnlineExam/admin/exampaper?m=allexam&method=1',
            page: true,
            cols: [[
                {field: 'exampaper_id', title: '试卷id', width: '10%', sort: true, fixed: 'left'}
                , {field: 'course_id', title: '所属题库', width: '10%', sort: true, fixed: 'left'}
                , {field: 'exampaper_name', title: '试卷名称', width: '20%', sort: true, fixed: 'left'}
                , {field: 'exampaper_score', title: '试卷总分', width: '10%', sort: true, fixed: 'left'}
                , {field: 'create_time', title: '创建时间', width: '20%'}
                , {fixed: 'right', width: '30%', align: 'center', toolbar: '#barDemo2'}
            ]]

        })
        //显示所有 共享试卷
        table.render({
            elem: '#allshareexampaper',
            url: '/OnlineExam/admin/exampaper?m=allshareexam&method=1',
            page: true,
            cols: [[
                {field: 'exampaper_id', title: '试卷id', width: '10%', sort: true, fixed: 'left'}
                , {field: 'course_id', title: '所属题库', width: '10%', sort: true, fixed: 'left'}
                , {field: 'exampaper_name', title: '试卷名称', width: '15%', sort: true, fixed: 'left'}
                , {field: 'exampaper_score', title: '试卷总分', width: '10%', sort: true, fixed: 'left'}
                , {field: 'user_id', title: '创建人', width: '10%', sort: true, fixed: 'left'}
                , {field: 'create_time', title: '创建时间', width: '20%'}
                , {fixed: 'right', width: '25%', align: 'center', toolbar: '#barDemo1'}
            ]]

        })

        //****************************
        //按条件显示我的试卷
        $(".searchmyexampaper").click(function () {
            var course = document.querySelector(".selectcourse").value;
            table.reload('allmyexampaper', {
                elem: '#allmyexampaper',
                url: '/OnlineExam/admin/exampaper?m=allexam',
                // id:'myexampaper',
                where: {
                    'method': 2,
                    'course': course,
                },
                page: true,
                cols: [[
                    {field: 'exampaper_id', title: '试卷id', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'course_id', title: '所属题库', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'exampaper_name', title: '试卷名称', width: '20%', sort: true, fixed: 'left'}
                    , {field: 'exampaper_score', title: '试卷总分', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'create_time', title: '创建时间', width: '20%'}
                    , {fixed: 'right', width: '30%', align: 'center', toolbar: '#barDemo2'}
                ]]

            })
        })
        //按条件显示共享试卷
        $(".searchshareexmapaper").click(function () {
            var exampaper_name = document.querySelector(".exampaper_name").value;
            var course_id = document.querySelector(".course_id").value;
            var createuser_id = document.querySelector(".createuser_id").value;
            table.reload('allshareexampaper', {
                elem: '#allshareexampaper',
                url: '/OnlineExam/admin/exampaper?m=allshareexam',
                where: {
                    'method': 2,
                    'exampaper_name': exampaper_name,
                    'course_id': course_id,
                    'createuser_id': createuser_id
                },
                page: true,
                cols: [[
                    {field: 'exampaper_id', title: '试卷id', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'course_id', title: '所属题库', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'exampaper_name', title: '试卷名称', width: '20%', sort: true, fixed: 'left'}
                    , {field: 'exampaper_score', title: '试卷总分', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'user_id', title: '创建人', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'create_time', title: '创建时间', width: '15%'}
                    , {fixed: 'right', width: '30%', align: 'center', toolbar: '#barDemo1'}
                ]]
            })
        })

        //***********************弹出层试卷内容**********************
        var checkexampaper = document.querySelector("#checkexampaper");
        var bgtwo = document.querySelector(".bgtwo");
        var closebtn = document.querySelector(".closebtn");
        console.log(closebtn)
        var titletwo = document.querySelector("#titletwo");


        //监听行工具事件
        table.on('tool(allmyexampaper)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            console.log("当前行数据：" + data)
            if (layEvent === 'del') {
                layer.confirm("您确定删除试卷" + data.exampaper_id + "吗？", {btn: ['确定', '取消'], title: "提示"}, function (index) {
                    console.log("已删除--》" + data.exampaper_id);
                    location.href = "http://localhost:8080/OnlineExam/admin/exampaper?m=delexampaper&exampaper_id=" + data.exampaper_id;
                    layer.close(index);
                })
            } else if (layEvent === 'update') {
                layer.confirm("您确定修改试卷" + data.exampaper_id + "吗？", {btn: ['确定', '取消'], title: "提示"}, function (index) {
                    console.log("已修改--》" + data.exampaper_id);
                    location.href = "http://localhost:8080/OnlineExam/admin/exampaper?m=showupdateexampaper&course=" + data.course_id + "&exampaperid=" + data.exampaper_id + "&exampapername=" + data.exampaper_name + "&exampaper_desc=" + data.exampaper_desc + "&exampaper_score=" + data.exampaper_score + "&exampaper_type=" + data.exampaper_type;
                    layer.close(index);
                })
                // layer.msg('修改操作');
            } else if (layEvent === 'check') {
                layer.msg('查看操作');
                checkexampaper.style.display = 'block';
                bgtwo.style.display = 'block';
                console.log(data);
                document.querySelector(".exampaperid").setAttribute("value", data.exampaper_id);
                document.querySelector(".exampapername").setAttribute("value", data.exampaper_name);
                document.querySelector(".exampapercourse").setAttribute("value", data.course_id);
                document.querySelector(".exampaperscore").setAttribute("value", data.exampaper_score);
                document.querySelector(".exampapercreattime").setAttribute("value", data.create_time);
                document.querySelector(".exampaperdesc").setAttribute("value", data.exampaper_desc);
                document.querySelector(".exampapertype").setAttribute("value", data.exampaper_type);
                document.querySelector(".exampapercontent").setAttribute("value","试卷所有题目");
                // document.querySelector(".qsanswer").setAttribute("value", data.question_answer);
            }
        });
        table.on('tool(allshareexampaper)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm("您确定删除试卷" + data.exampaper_id + "吗？", {btn: ['确定', '取消'], title: "提示"}, function (index) {
                    console.log("已删除--》" + data.exampaper_id);
                    location.href = "http://localhost:8080/OnlineExam/admin/exampaper?m=delexampaper&exampaper_id=" + data.exampaper_id;
                    layer.close(index);
                })
            } else if (layEvent === 'update') {
                layer.confirm("您确定修改试卷" + data.exampaper_id + "吗？", {btn: ['确定', '取消'], title: "提示"}, function (index) {
                    console.log("已修改--》" + data.exampaper_id);
                    location.href = "http://localhost:8080/OnlineExam/admin/exampaper?m=showupdateexampaper&course=" + data.course_id + "&exampaperid=" + data.exampaper_id + "&exampapername=" + data.exampaper_name + "&exampaper_desc=" + data.exampaper_desc + "&exampaper_score=" + data.exampaper_score + "&exampaper_type=" + data.exampaper_type;
                    layer.close(index);
                })
            } else if (layEvent === 'check') {
                layer.msg('查看操作');
                checkexampaper.style.display = 'block';
                bgtwo.style.display = 'block';
                console.log(data);
                document.querySelector(".exampaperid").setAttribute("value", data.exampaper_id);
                document.querySelector(".exampapername").setAttribute("value", data.exampaper_name);
                document.querySelector(".exampapercourse").setAttribute("value", data.course_id);
                document.querySelector(".exampaperscore").setAttribute("value", data.exampaper_score);
                document.querySelector(".exampapercreattime").setAttribute("value", data.create_time);
                document.querySelector(".exampaperdesc").setAttribute("value", data.exampaper_desc);
                document.querySelector(".exampapertype").setAttribute("value", data.exampaper_type);
                document.querySelector(".exampapercontent").setAttribute("value","试卷所有题目");
                // document.querySelector(".qsanswer").setAttribute("value", data.question_answer);
            }
        });
        closebtn.onclick = function () {
            console.log("关闭按钮被点击")
            checkexampaper.style.display = 'none';
            bgtwo.style.display = 'none';
        }
        titletwo.addEventListener('mousedown', function (e) {
            var x = e.pageX - checkexampaper.offsetLeft;
            var y = e.pageY - checkexampaper.offsetTop;
            //（2）当鼠标移动时，把鼠标的页面中坐标减去  鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                checkexampaper.style.left = e.pageX - x + "px";
                checkexampaper.style.top = e.pageY - y + "px";
            }

            //（3）鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })
        })
//**********************************************************************

        //创建试卷 跳转页面
        $(".createexampaperBtn").click(function () {
            location.href = "http://localhost:8080/OnlineExam/admin/createexampaper.jsp";
        })
        //管理试卷 跳转页面
        $(".managerexampaperBtn").click(function () {
            location.href = "http://localhost:8080/OnlineExam/admin/exampaper.jsp";
        })


    })


</script>

</html>